Povijest JavaScript jezika

JavaScript je skriptni jezik koji je nastao u svega deset dana. Stvorio ga je Brendan Eich u svibnju 1995. godine. Jezik je razvijen u kompaniji Netscape Communications Corporation i u početku se nije koristio naziv JavaScript nego Moca. Taj naziv je odabrao osnivač Netscape-a Marc Andreessen, kasnije se koristio i naziv LiveScript. U prosincu 1995. pojam JavaScript je ušao u stalnu uporabu i koristi se i danas. Godine 1997. izašla je prva inačica standarda za JavaScript razvijena od strane kompanije ECMA (European Computer Manufactures Association), a samo godinu dana kasnije standard nazvan ECMA-262 je odobren od strane međunarodnog ISO (International organization for standardization). Standard za ovaj jezik se kontinuirano razvija s razvojem interneta i web tehnologija.

Što je JavaScript?

JavaScript je skriptni jezik koji je namijenjen razvoju interaktivnih HTML(HyperText Markup Language) stranica i izvršava se na strani klijenta. Uporabom JavaScripta smanjena je potreba za komunikaciju sa serverom, korisnik dobiva trenutni odziv tj. ne mora čekati da se stranica ponovno učita kako bi vidio promjene na stranici. JavaScriptom kreiramo sučelje koje reagira na korisnikove akcije tipkovnice ili miša te tako stvaramo bogatije i zanimljivije sučelje za korisnika. JavaScript je jedan od tri jezika koja svaki dobar web programer (developer) mora znati, uz HTML koji se koristi za određivanje sadržaja tj. contenta na web stranici i CSS koji se koristi za definiranje stila stranice u preglednicima.

Slika 1. - Shema klijent-server veze

Programski kod JavaScripta upisuje se direktno u HTML stranicu ili se piše u posebnoj datoteci koja je povezana s HTML stranicom preko src atributa u script elementu

Primjer JavaScript koda u HTML datoteci, koji radi na način da kada otvorimo web stranicu otvara se prozorčić u kojemu piše „Hello World!“.

<!DOCTYPE html >
<html>
<head>
<title>JavaScript u HTML dokumentu</title> </head>

<body>
<script>
alert('Hello World');
</script>
</body>
</html>

Slika 2. - Primjer JavaScript kod u HTML dokumentu

Primjer JavaScript koda koji se nalazi u zasebnoj datoteci koja je povezana preko src atributa u script elementu. Datoteka u kojoj se nalazi JavaScript kod mora imati isti naziv koji smo napisali u src atributu i još završnu oznaku .js, u ovom slučaju to je „skripta.js“. Također, datoteka u kojoj pišemo JavaScript kod treba imati relativnu putanju od HTML datoteke s kojom je povezana kako bi uspješno implementirali JavaScript kod.

Slika 3. - Primjer JavaScript koda u zasebnoj datoteci

JavaScript omogućuje izvršavanje određenih radnji u inače statičnim HTML dokumentima, npr. interakciju s korisnikom, promjenu svojstava prozora preglednika i dinamičko stvaranje HTML sadržaja. JavaScript može poslužiti za reakcije na događaje (events), čitanje i promjenu sadržaja HTML elemenata, provjeru sadržaj polja forme, komunicira sa serverskim programima, a podržavaju je svi poznatiji web preglednici (Chrome, Opera, Mozilla Firefox, Safari, Internet Explorer). JavaScript kod možemo pisati u jednostavnim ASCII programima poput običnog bloka za pisanje kojeg svaki kompjuter ima instaliranog. Preporučuju se pisanje u Notepad++ zbog jednostavnosti programa.

JavaScript sintaksa

Pisanje u bilo kojem jeziku zahtijeva određena pravila, npr. hrvatski jezik zahtijeva uporabu velikog slova na početku rečenice, a kraj rečenice označavamo točkom, uskličnikom ili upitnikom. To se naziva sintaksom ili gramatikom nekog jezika. Svaki programski jezik ima svoju sintaksu. Pravila za pisanje JavaScripta su slijedeća:

JavaScript je jezik koji je osjetljiv na velika i mala slova, što znači da ih razlikuje, što bi značilo da su riječi document i DOCUMENT dvije potpuno različite riječi.

Svi izrazi u JavaScriptu trebaju završavati točka-zarezom (;), također dva izraza u jednom redu se razdvajaju istim interpunkcijskim znakom tj. točka-zarezom (;).

var x = 0; var y = 0;

Kao što to radi HTML tako i JavaScript ignorira razmak između znakova, tabove i nove redove koji se pojavljuju između izraza. Dobro je koristiti razmake radi čitljivosti i preglednosti samog koda

var x = 0; isto je što je var x=0;

String je skup znakova koji je omeđen jednostrukim ‘ ‘ ili dvostrukim navodnicima “ ”. JavaScript dopušta postavljanje jednostrukih navodnika unutar dvostrukih i obratno.

<input type=”button” value=”Ovdje kliknite”
onclick=”window.alert(‘OK’);">

Dopušteno je lomljenje teksta u više redova korištenjem obrnute kose crte.

document.getElementById("naslov").innerHTML="Novo \
u kinima";

JavaScript izjave se sastoje od vrijednosti, operatora, izraza, ključnih riječi i komentara.

JavaScript sintaksa definira dvije vrste vrijednosti: fiksne vrijednosti i vrijednosti varijabli. Fiksne vrijednosti se nazivaju literali i oni imaju svoja pravila. Neka od pravila su da se brojevi pišu sa ili bez decimalnih oznaka. JavaScript u varijablama pohranjuje vrijednost podataka. Za određivanje varijable koristi se ključna riječ var.

Operatori u JavaScriptu predstavljaju simbole, koji označavaju određenu operaciju. Kako bi dodali vrijednost određenoj varijabli koristimo operator “=”. Npr. var x = 5;. JavaScript koristi matematičke operatore kako bi izračunali vrijednosti varijabli.

Na Slici 4. vidi se primjer gdje će se u p elementu automatski unijeti vrijednost koja je rezultat script elementa, odnosno zamijeniti će se ono što se prethodno nalazilo u elementu. Na taj način se postiže dinamičnost stranice.

<!DOCTYPE html >
<html>
<head>
<title>JavaScript operatori</title>
</head>

<body>
<p id="demo">Ovdje će se prikazati rezultat </p>
<script>
document.getElementById("demo").innerHTML=(5+6)*10
</script>
</body>
</html>

Slika 4. - Uporaba matematičkih operatora

JavaScript izrazi su kombinacija vrijednosti, varijabli i operatora koji izračunavaju određenu vrijednost.

<!DOCTYPE html >
<html>
<head>
<title>JavaScript operatori</title>
</head>

<body>

<p id="demo">Ovdje će se prikazati rezultat </p>

<script>
var x = 5;
document.getElementById("demo").innerHTML=x*10
</script>
</body>
</html>

Slika 5. - Uporaba izraza za izračunavanje vrijednost kombinacijom vrijednosti, varijabli i operatora

Ključne riječi u JavaScriptu se koriste za identificiranje akcije koja će biti izvršena. Npr. ključna riječ var govori browseru da stvori novu varijablu

JavaScript komentari se koriste za pojašnjenje koda i čine ga lakšim za čitanje. Komentari se također koriste da stopiraju izvršavanje određene naredbe. Primjer:

// Ovo je jedna linija komentara

/*
*
*Ovo je više linija komentara
*
*/

/*

Ovo je također više linija komentara

*/

// Kod koji stoji ispod ovog komentara neće biti izvršen

/*
document=getElementById("demo").innerHTML = "Welcome";
*/

Slika 6. - Komentari u JavaScriptu

Pisanje JavaScript koda

Sada kada smo se upoznali s osnovnim informacijama o JavaScriptu možemo krenuti u implementaciju JavaScript koda u HTML stranicu. Već smo ranije spomenuli da se JavaScript kod može pisati direktno u HTML stranicu u elementu script ili se može pisati u posebnom dokumentu koji ima završnu oznaku .js i preko src atributa u script elementu je povezan s HTML stranicom. Preporučuje se pisanje JavaScript koda u posebnom dokumentu radi preglednosti i čistoće HTML koda. Ukoliko se neka JavaScript funkcija rabi u više HTML dokumenata, poziva se jedna datoteka, što omogućuje jednostavnije održavanje, a smanjuje i potrošnju diska. Zbog preglednosti i lakšeg snalaženja dalje u dokumentu JavaScript kodovi će se pisat u HTML dokumentu. Za početak ćemo ispisati jedan jednostavan JavaScript kod koji nam služi da provjerimo koji je danas datum i koliko je točno sati.

<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Prvi JavaScript kod</title>
</head>
<body>
<p id="demo">Ovdje će se prikazati točan datum i vrijeme </p>

<a href="#" onclick=document.getElementById("demo").innerHTML = Date ();>
Klikni ovdje i saznaj točan datum i vrijeme
</a>
<body>
</html>

Slika 7. - Primjer JavaScirpt koda unutar HTMLa

U ovom jednostavnom JavaScript kodu smo u HTML elementu a dodali JavaScript funkciju onclick koja na klik mišem izvršava zadanu naredbu, u ovom slučaju na klik mišem u elementu p će se pokazati točno vrijeme i datum kada smo kliknuli na element a. Preko identifikatora “demo” element p je povezan s elementom a te klikom na element a poziva se funkcija koja elementu koji ima identifikator “demo” ispunjava unutrašnji prostor s datumom i vremenom klika.

Kao drugi primjer implementacije JavaScripta u HTML kod uzet ćemo promjenu sadržaja unutar HTML elementa.

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title> Mijenjanje HTML sadržaja pomoću JavaScripta </title>
</head>

<body>

<p id="change"> Ovdje će se promijeniti sadržaj </p>

<a href="#" onclick = "document.getElementById('change').innerHTML =
'Ovaj sadržaj se pojavio u p elementu nakon što ste ga kliknuli'"> Klikni ovdje!
</a>

</body>
</html>

Slika 8. JavaScript kod koji mijenja sadržaj HTML elementa

Klikom na HTML element a poziva se funkcija koja u element p, odnosno u bilo koji element koji ima identifikator isti kao i element koji poziva funkciju, upisuje ono što joj je zadano tj. ono što se nalazi između jednostrukih navodnika.

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title>Jednostavni kalkulator</title> </head>

<body>

<script>

var a = Number (prompt ("Unesi prvi broj") );

var b = Number (prompt ("Unesi drugi broj") );

alert (a+b);

</script>
</body>
</html>

Slika 9. - Jednostavni JavaScript kod za izračun vrijednosti varijabli

Za ovaj primjer koristili smo jednostavan matematički operator i sabrali smo vrijednosti varijabli a i b i dobili rezultat. Vrijednosti možemo mijenjati ovisno o vrijednostima koje želimo izračunati. Također i operatore možemo mijenjati u vrijednosti alert (*, /, -, +) . Ovo je ujedno i jednostavna aplikacija kalkulatora pomoću kojega možete izračunati vrijednosti bilo koja dva broja.

Za idući primjer ćemo koristiti JavaScript kod koji će mijenjati CSS svojstva.

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title>Mijenjanje CSS svojstava JavaScriptom</title> </head>
<body>

<p id="boja">Hello World!</p>

<a href="#" onclick="getElementById('boja').style.color = 'red'";>

Klikni ovdje i promijeni boju 'Hello World!' u crvenu</a>

<a href="#" onclick="getElementByID('boja').style.fontFamily =
'Courier New'";>

Klikni ovdje i promijeni font 'Hello World!' u Courier New</a>

<a href="#" onclick="getElementByID('boja').style.fontSize =
'50px'";>

Klikni ovdje i promijeni veličinu slova 'Hello World!' u 50px</a>

</body>
</html>

Slika 10. - JavaScript kod koji prikazuje na koji način možemo mijenjati CSS svojstva pomoću JavaScripta

U primjeru vidimo pozivanje funkcije koja mijenja stil elementa koji ima identifikator “boja”. U ovom slučaju će se klikom na prvi element a boja teksta u p elementu promijeniti u crvenu. Klikom na drugi a element tekst u p elementu će biti ispisan fontom Courier New. Klikom na treći a element tekst u p elementu će promijeniti veličinu fonta i sada će biti ispisan veličinom od 50 piksela.

Izrada jednostavne aplikacije

JavaScript se koristi prilikom izrade web i mobilnih aplikacija. U idućem primjeru ćemo izraditi jednostavnu aplikaciju “Ljubavni kalkulator”. Prilikom otvaranja stranice pokreće se skripta koja prikaže prozorčić u kojem se nalazi polje (prompt) za unošenje vrijednosti. Unutar polja unosite ime osoba i kao rezultat dobijete postotak koliko se vole.

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title>Aplikacija Ljubavni kalkulator</title>
</head>

<body>

<script>

var ime1;

var ime2;

ime 1 = prompt ("Unesite ime prve osobe");
ime 2 = prompt ("Unesite ime druge osobe");

alert(ime1 + " i " + ime2 " se vole " + Math.random()*100 + " % ");

</script>

</body>
</html>

Slika 11. - JavaScript kod za izradu jednostavne aplikacije “Ljubavni kalkulator”

Tko želi znati više - Razlika između Jave i JavaScripta

Osnove programiranja JavaScriptom ne razlikuju se značajno od osnova programiranja u programskom jeziku C ili nekom drugom jeziku, ali ipak se često pojavljuju nedoumice prilikom spominjanja Jave i JavaScripta. JavaScript nije pojednostavljena verzija programskog jezika Jave, to su dva potpuno različita jezika. Povezuje ih jedino slična sintaksa i to što se koriste za izvršavanje određenih radnji unutar preglednika. Java je jezik čiji se izvorni kod postupkom “kompajliranja” pretvara u binarni oblik i razvila ga je tvrtka Sun Microsystems. Za razliku od Jave, JavaScript je iterpretacijski orijentiran jezik. Pojam interpretacijski orijentiran jezik znači da će se u pregledniku učitati cijela stranica, a JavaScript kod će se izvršiti po okidanju (trigger) nekog događaja (event). JavaScript i Java se nadopunjuju: JavaScript može utjecati na preglednik i HTML sadržaj (Java ne može utjecati na preglednik), ali ne može iscrtavati složeni grafički sadržaj, izvršavati mrežne programe i višenitnost, što Java može.

Funkcioniranje JavaScripta

JavaScript je interpretiran jezik, što znači da se skripta izvršava odmah naredbu po naredbu, bez prethodnog prevođenja (“kompajliranja”) cijelog programa i kreiranja izvršne datoteke. Interpreter čita kod i prevodi ga u strojni jezik svakog puta kada se pokrene skripta. Svaki jezik koji se interpretira naziva se skriptni jezik. Interpreter za JavaScript ugrađen je u većinu današnjih preglednika. Pisanje programa u skriptnim jezicima je puno jednostavnije nego pisanje programa u programskim jezicima. Razlika između skriptnih i programskih jezika leži u tome da se kod skriptnog jezika ne treba prevoditi skripte u strojni jezik, dok kod programskog jezika se program mora prevesti u strojni jezik. JavaScript može proširiti korisnost web stranica u odnosu na one stranice koje oslanjaju samo na HTML. Uporabom JavaScripta moguće je provjeravati točnost unosa podataka od strane korisnika, kreirati zanimljive efekte i otvarati prozore koji će se pojaviti kada se dogodi neki od predefiniranih događaja. Ako se JavaScript kombinira s CSS-om, tada se dobiva dinamička HTML stranica.

Literatura

http://www.w3schools.com/js/default.asp

Maleš, Lada. Osnove programiranja za web